/*
 * 职员修改编辑
 * @Author: ljb
 * @Date: 2018-03-27 17:53:27
 * @Last Modified by: kanglin
 * @Last Modified time: 2018-05-31 17:51:45
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>


</style>
<template>
	<div class="v-admin-staff-edit">
		<Form
			ref="formValidate"
			:model="formValidate"
			:rules="ruleValidate"
			:label-width="80">

			<Form-item
				label="职员名称"
				prop="name">
				<i-input
					v-model="formValidate.name"
					type="text"
					placeholder="请输入名称"/>
			</Form-item>

			<Form-item
				label="密码"
				prop="password">
				<i-input
					v-model="formValidate.password"
					type="text"
					placeholder="请输入密码" />
			</Form-item>

			<Form-item
				label="电话"
				prop="phone">
				<i-input
					v-model="formValidate.phone"
					type="text"
					placeholder="请输入电话" />
			</Form-item>

			<Form-item
				label="性别"
				prop="sex">
				<RadioGroup v-model="formValidate.sex">
					<Radio label="0">
						<span>男</span>
					</Radio>
					<Radio label="1">
						<span>女</span>
					</Radio>
				</RadioGroup>
			</Form-item>

			<Form-item
				label="年龄"
				prop="age">
				<InputNumber
					:max="100"
					:min="1"
					v-model="formValidate.age"
					placeholder="请输入年龄"/>
			</Form-item>

			<Form-item
				label="职员身份"
				prop="role_name">
				<Select
					v-model="formValidate.role_name"
					clearable
					placeholder="请选择职员身份"
					transfer>
					<Option
						v-for="( staff , key ) in staffRoles"
						:value="staff.id + ''"
						:key="key">{{ staff.name }}</Option>
				</Select>
			</Form-item>

			<Form-item>
				<Button
					type="primary"
					@click="updateStaff">更新</Button>
			</Form-item>

		</Form>
	</div>
</template>

<script>

import { validatePhone } from 'src/validate';

export default {
	name: 'StaffEdit',
	props: {
		staffDetail: {
			type: Object,
			required: true,
		},
		staffRoles: {
			type: Object,
			required: true,
		},

	},
	data() {
		return {

			formValidate: {

				_method: 'PUT',

				name: '',

				password: '',

				phone: '',

				sex: '0',

				age: 1,

				role_name: '',
			}, // 更新视频时的表单

			ruleValidate: {
				name: [
					{ message: '职员名称不能为空', trigger: 'blur,change' },
				],
				password: [
					{ message: '密码不能为空', trigger: 'blur,change' },
				],
				phone: [
					{ validator: validatePhone, trigger: 'blur,change' },
				],
				sex: [
					{ message: '性别不能为空', trigger: 'blur,change' },
				],
				age: [
					{ type: 'number', message: '年龄不能为空', trigger: 'blur,change' },
				],
				role_name: [
					{ message: '职员角色不能为空', trigger: 'blur,change' },
				],
			},

		};
	},
	watch: {
		staffDetail() {
			if (this.staffDetail) {
				this.formValidate.name = this.staffDetail.name;

				this.formValidate.phone = this.staffDetail.phone;
				this.formValidate.sex = String(this.staffDetail.sex);
				this.formValidate.age = this.staffDetail.age;

				this.formValidate.role_name = String(this.staffDetail.role_name);
			}
		},
	},
	methods: {

		/**
         * 更新合作伙伴信息
         * @return {undefined}
         */
		updateStaff() {
			this.$emit('update', this.staffDetail.id, this.formValidate);
		},

	},
};
</script>
